<template>
    <view class="box">
        <!-- <u-navbar title="阀贸通" placeholder autoBack border></u-navbar> -->
        <view class="container">
            <!-- <image class="img" mode="widthFix" :src="'https://famen-img.oss-cn-beijing.aliyuncs.com/'+info.indexImg1" :style="{ height: imgHeight + 'px' }" @load="onImgLoad" /> -->
            <u-swiper :list="SwiperList" height="450"></u-swiper>
        </view>

        <view class="header" v-if="this.info">
            <text>{{ info.storeName }}</text>
            <view class="flex" v-if="status == 'svip'">
                <image src="../../static/sjcjgc@3x.png" style="width: 173rpx; height: 48rpx; margin-right: 30rpx;" />
                <view><text>{{ years }}年</text>主营：{{ info.mainProducts }}</view>
            </view>
            <view class="flex flex-jc-sb flex-ai-fe" v-else style="margin-top: 10rpx;">
                <view><text>{{ years }}年</text>主营：{{ info.mainProducts }}</view>
                <image src="../../static/vip@3x.png" style="width: 100rpx; height: 63rpx;" />
            </view>
        </view>

        <view class="info" v-if="this.info">
            <view class="info-list flex flex-jc-sb">
                <view class="item">
                    <text>{{ info.companyArea }}㎡</text>
                    <view>工厂面积</view>
                </view>
                <view class="item">
                    <text>{{ timestampToTime(info.registerDate).slice(0, 11) }}</text>
                    <view>创建时间</view>
                </view>
                <view class="item">
                    <text>{{ info.employCount }}</text>
                    <view>员工人数</view>
                </view>
            </view>
            <view class="info-footer flex flex-ai-c">
                <image src="../../static/dz@3x.png" style="width: 26rpx; height: 33rpx; margin-right: 30rpx;" />
                <text v-if="info.city == '市辖区'">{{ info.province + info.region }}</text>
                <text v-else> {{ info.province + info.city + info.region }} </text>
            </view>
        </view>

        <view class="list" v-if="this.info">
            <view class="list-title flex flex-jc-sb flex-ai-c">
                <text>商品列表</text>
                <view class="flex flex-ai-c">更多商品
                    <image src="../../static/ysj@3x.png" style="width: 18rpx; height: 30rpx; margin-left: 30rpx;" />
                </view>
            </view>
            <view v-if="this.jsonRootBean.list.length >= 3" class="flex flex-jc-sb flex-ai-c">
                <view class="list-item" v-for="(item, index ) in this.jsonRootBean.list" :key="index"></view>
            </view>
            <view v-else class="flex flex-jc-fs flex-ai-c">
                <view class="list-item" v-for="(item, index ) in this.jsonRootBean.list" :key="index"
                    style="margin-right: 30rpx;"></view>
            </view>
        </view>

        <view class="introduction" v-if="this.info">
            <view class="introduction-title flex flex-jc-sb flex-ai-c">
                <text>公司介绍</text>
                <view class="flex flex-ai-c" @click="handleMore()">{{ moretitle }}
                    <image src="../../static/ysj@3x.png"
                        style="width: 18rpx; height: 30rpx; margin-left: 30rpx; transition: 0.5s;" :style="more" />
                </view>
            </view>
            <view class="introduction-content">
                {{ info.sroreDesc }}
            </view>
            <view class="introduction-list" v-if="moreShow">
                <view class="item flex flex-ai-c">
                    <text>主营产品</text>
                    <text>{{ info.brand }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>企业性质</text>
                    <text>{{ info.companyType }}</text>
                </view>
                <!-- <view class="item flex flex-ai-c">
                    <text>经营模式</text>
                    <text>{{ info.sroreDesc }}</text>
                </view> -->
                <view class="item flex flex-ai-c">
                    <text>工商注册号</text>
                    <text>{{ info.companyNo }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>注册资金</text>
                    <text>{{ info.registerMoney }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>负责人</text>
                    <text>{{ info.domainUserName }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>公司所在地</text>
                    <text v-if="info.city == '市辖区'">{{ info.province + info.region }}</text>
                    <text v-else> {{ info.province + info.city + info.region }} </text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>主要经营地</text>
                    <text>{{ info.address }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>经营品牌</text>
                    <text>{{ info.brand }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>年营业额</text>
                    <text>{{ info.turnover }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>开户银行</text>
                    <text>{{ info.companyBank }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>银行账号</text>
                    <text>{{ info.companyBankNo }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>是否提供对外加工/定制服务</text>
                    <text v-if="info.externalService == 1">是</text>
                    <text v-else>否</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>管理体系认证</text>
                    <text>{{ info.managerSys }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>产品质量认证</text>
                    <text>{{ info.productQuality }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>质量控制</text>
                    <text v-if="info.qualityControl == 1">外部</text>
                    <text v-else>内部</text>
                </view>
            </view>
        </view>

        <view class="contact" v-if="this.info">
            <view class="contact-title flex flex-jc-sb flex-ai-c">
                <text>联系我们</text>
            </view>
            <view class="contact-list">
                <view class="item flex flex-ai-c">
                    <text>联 系 人:</text>
                    <text>{{ info.contactPerson }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>电　　话:</text>
                    <text>{{ info.contactPhone }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>移动电话:</text>
                    <text>{{ info.contactPhone2 }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>传　　真:</text>
                    <text>{{ info.facsimile }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>邮　　箱:</text>
                    <text>{{ info.email }}</text>
                </view>
                <view class="item flex flex-ai-c">
                    <text>地　　址:</text>
                    <text>{{ info.addressInfo }}</text>
                </view>
                <!-- <view class="item flex flex-ai-c">
                    <text>公司网站:</text>
                    <text>{{ info.productQuality }}</text>
                </view> -->
            </view>
        </view>

        <view class="footer" v-if="this.info">
            <view class="footer-main flex flex-jc-sb flex-ai-c">
                <view class="left flex flex-jc-sb">
                    <view class="image"></view>
                    <view class="contacts">
                        <text>{{ info.contactPerson }}</text>
                        <view class="tab">厂长</view>
                    </view>
                </view>
                <view class="right">
                    <image src="../../static/ddh@3x.png" style="width: 177rpx; height: 82rpx;" @click="call()" />
                    <image src="../../static/zxw@3x.png" style="width: 177rpx; height: 82rpx;" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            id: '',
            info: null,
            years: 0,
            imgHeight: 0,
            status: "svip",
            list: ["", "", ""],
            SwiperList: [],
            more: {
                transform: "rotate(90deg)"
            },
            moretitle: "展开全部",
            moreShow: false,
            jsonRootBean: {
                list: []
            }


        }
    },
    onLoad(params) {
        this.id = params.id;
        this.years = params.years;
        this.loadData(params.id);
    },
    methods: {
        loadData(id) {
            uni.showLoading({
                title: '加载中...',
                mask: true,
            });
            uni.$req.get(`/famenApi/system/info/getInfoForExternal/${id}`).then(res => {
                uni.hideLoading();
                if (res.code == "200") {
                    this.info = res.data.storeInfo;
                    this.jsonRootBean = res.data.jsonRootBean;
                    if (res.data.storeInfo.indexImg1) {
                        this.SwiperList.push("https://famen-img.oss-cn-beijing.aliyuncs.com/" + res.data.storeInfo.indexImg1);
                    }
                    if (res.data.storeInfo.indexImg2) {
                        this.SwiperList.push("https://famen-img.oss-cn-beijing.aliyuncs.com/" + res.data.storeInfo.indexImg2);
                    }
                    if (res.data.storeInfo.indexImg3) {
                        this.SwiperList.push("https://famen-img.oss-cn-beijing.aliyuncs.com/" + res.data.storeInfo.indexImg3);
                    }

                }
            })

        },
        onImgLoad(e) {
            // 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
            const { width, height } = e.mp.detail;
            this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
        },
        // 点击更多
        handleMore() {
            this.more.transform = this.more.transform == 'rotate(90deg)' ? 'rotate(270deg)' : 'rotate(90deg)'
            this.moretitle = this.moretitle == '展开全部' ? '收起全部' : '展开全部'
            this.moreShow = !this.moreShow
        },
        // 打电话
        call() {
            console.log(this.info.contactPhone);
        },
        // 转变时间戳
        timestampToTime(timestamp) {
            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + "-";
            var M =
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "-";
            var D = date.getDate() + " ";
            var h = date.getHours();
            h = h >= 10 ? h : "0" + h
            var m = date.getMinutes();
            m = m >= 10 ? m : "0" + m
            var s = date.getSeconds();
            s = s >= 10 ? s : "0" + s
            return Y + M + D + h + ":" + m + ":" + s;
        },
    }
}
</script>

<style lang="scss" scoped>
.box {
    background-color: #727480;
    position: relative;
    height: calc(100% - 100rpx);
    min-height: calc(100vh - 100rpx);

    .img {
        width: 100%;
    }

    .header {
        height: 280rpx;
        width: calc(100% - 40rpx);
        margin: 0 20rpx 20rpx;
        background: #1C134A;
        border-radius: 29rpx 29rpx 29rpx 29rpx;
        transform: translateY(-50rpx);
        padding: 28rpx 26rpx;

        >text {
            display: block;
            font-size: 38rpx;
            color: #F5E3A1;
        }

        >view {
            margin-top: 30rpx;
            font-size: 33rpx;
            color: #A19DB4;

            >view {
                >text {
                    margin: 0 30rpx 0 0;
                }

                width: 68%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                // margin-bottom: 20rpx;
            }
        }
    }

    .info {
        height: 230rpx;
        margin: 0 20rpx 20rpx;
        background: linear-gradient(to right, #FFF9E9 0%, #FFE4C8 100%);
        border-radius: 29rpx;
        transform: translateY(-150rpx);
        position: relative;
        padding: 40rpx;

        .info-list {
            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                >text {
                    font-size: 39rpx;
                    color: #030302;
                }

                >view {
                    margin-top: 15rpx;
                    font-size: 27rpx;
                    color: #7B7C87;
                }
            }
        }

        .info-footer {
            width: 100%;
            left: 0;
            bottom: 0;
            height: 67rpx;
            line-height: 67rpx;
            position: absolute;
            background: linear-gradient(to right, #FFFFFD 0%, #FFF8EF 100%);
            border-radius: 0rpx 0rpx 29rpx 29rpx;
            padding-right: 25rpx;
            padding-left: 25rpx;

            text {
                display: block;
                width: 90%;
                font-size: 27rpx;
                color: #7B7C87;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }

    .list {
        height: 351rpx;
        transform: translateY(-150rpx);
        margin: 0 20rpx 20rpx;
        background: #FFFFFD;
        border-radius: 29rpx;
        padding: 30rpx 24rpx 27rpx 24rpx;

        .list-title {
            text {
                font-size: 39rpx;
                color: #1F1F1F;
            }

            view {
                font-size: 32rpx;
                color: #818181;

            }
        }

        .list-item {
            margin-top: 45rpx;
            width: 212rpx;
            height: 208rpx;
            background: #D3D3D3;
            border-radius: 24rpx;
        }

    }

    .introduction {
        // height: 351rpx;
        transform: translateY(-150rpx);
        margin: 0 20rpx 20rpx;
        background: #FFFFFD;
        border-radius: 29rpx;
        padding: 30rpx 24rpx 27rpx 24rpx;
        transition: 0.5s;

        .introduction-title {
            margin-bottom: 20rpx;

            text {
                font-size: 39rpx;
                color: #1F1F1F;
            }

            view {
                font-size: 32rpx;
                color: #818181;

            }
        }

        .introduction-list {
            background: #FFFFFF;
            border-radius: 17rpx;
            padding: 35rpx 20rpx;

            .item {
                text {
                    margin: 10rpx 0;

                    &:nth-child(1) {
                        font-family: SimHei;
                        width: 180rpx;
                        font-weight: 600;
                        font-size: 30rpx;
                    }

                    &:nth-child(2) {
                        width: calc(100% - 200rpx);
                    }
                }
            }
        }
    }

    >.contact {
        transform: translateY(-150rpx);
        margin: 0 20rpx 20rpx;
        background: #FFFFFD;
        border-radius: 29rpx;
        padding: 30rpx 24rpx 27rpx 24rpx;
        transition: 0.5s;

        .contact-title {
            margin-bottom: 20rpx;

            text {
                font-size: 39rpx;
                color: #1F1F1F;
            }

            view {
                font-size: 32rpx;
                color: #818181;

            }
        }

        .contact-list {
            background: #FFFFFF;
            border-radius: 17rpx;
            padding: 20rpx 20rpx;

            .item {
                text {
                    margin: 10rpx 0;

                    &:nth-child(1) {
                        font-family: SimHei;
                        width: 180rpx;
                        font-weight: 600;
                        font-size: 30rpx;
                    }

                    &:nth-child(2) {
                        width: calc(100% - 200rpx);
                    }
                }
            }
        }
    }

    .footer {
        // position: absolute;
        position: fixed;
        margin: 0 20rpx;
        bottom: 0rpx;
        width: calc(100% - 40rpx);
        height: 176rpx;
        background: #FFFFFD;
        border-radius: 29rpx 29rpx 0rpx 0rpx;

        .footer-main {
            padding: 12rpx;
            height: 112rpx;
            margin-top: 30rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 16rpx 32rpx 32rpx rgba(0, 0, 0, 0.15);
            border-radius: 52rpx 52rpx 52rpx 52rpx;

            .left {
                .image {
                    width: 82rpx;
                    height: 82rpx;
                    border-radius: 50%;
                    background: #0184B2;
                }

                .contacts {
                    margin-left: 30rpx;

                    >text {
                        font-size: 34rpx;
                        color: #000000;
                    }

                    .tab {
                        text-align: center;
                        margin-top: 5rpx;
                        width: 69rpx;
                        line-height: 33rpx;
                        height: 33rpx;
                        background: linear-gradient(to right, #EBD4A0 0%, #E8AC6B 100%);
                        border-radius: 5rpx 5rpx 5rpx 5rpx;
                        font-size: 27rpx;
                        color: #000000;
                    }
                }
            }

            .right {}
        }
    }
}
</style>